import { useState, useId } from "react";
import { Button, Input } from "antd";
/**
 * useId 是 React 18 新增的一个 Hook，用于生成稳定的唯一标识符，主要用于解决 SSR 场景下的 ID 不一致问题，或者需要为组件生成唯一 ID 的场景。
 * 
 * 基于组件树位置生成的，所以服务端ssr渲染能保持一致，，
 * 
 * 应用场景：
 * 为组件生成唯一 ID
    解决 SSR 场景下的 ID 不一致问题
    无障碍交互唯一ID

    使用特点
无需传入参数
返回确定性的唯一字符串（如:r0:）
同一组件多次调用会生成递增的 ID
适合在需要稳定 ID 的场景下使用，而不是用于视觉或样式目的

最佳实践
当需要多个相关 ID 时，应该使用同一个 useId 调用，并添加后缀
const id = useId();
const passwordId = `${id}-password`;
const confirmId = `${id}-confirm`;
不要用于列表渲染的 key 属性
优先用于可访问性和 SSR 场景
 * @returns
 */
export const UseIdDemo = () => {
  console.log("useId", useId());
  console.log("useId", useId());
  const id = useId();
  const handleClick = () => {
    console.log("useId", id);
  };
  return (
    <div>
      <h1>UseId</h1>
      <label htmlFor="inputId">点击聚焦：</label>
      <Input id="inputId" placeholder="请输入"></Input>
      <Button onClick={handleClick}>点击</Button>
    </div>
  );
};
